<template>
    <div class="productProNew">
        <div class="title"><h1><span>编辑成员</span></h1></div>
        <form name="基本信息" class="basicInfor">
            <h1 class="hide">姓名(必填)</h1>
            <div class="form-group required">
                <label :for="'username'+$attrs.text">姓名：</label>
                <input autocomplete="off" type="text" class="form-control adultPrice" :id="'username'+$attrs.text" placeholder="" required v-model="personnel.name">
            </div>
            <h1 class="hide">性别(必填)</h1>
            <div class="form-group required">
                <label :for="'gender'+$attrs.text">性别：</label>
                <select class="form-control select proType" name="gender" :id="'gender'+$attrs.text" @change="colorChange($event)" v-model="personnel.gender">
                    <option v-for="item in gender">{{item}}</option>
                </select>
            </div>
            <h1 class="hide">出生日期</h1>
            <div class="form-group required">
                <label :for="'born'+$attrs.text">出生日期：</label>
                <input autocomplete="off" name="born" type="text" class="form-control ipt-datepicker adultPrice" :id="'born'+$attrs.text" placeholder="请选择" required v-model="personnel.birthday">
            </div>
            <h1 class="hide">手机号（必填）</h1>
            <div class="form-group san required">
              <label :for="'phone'+$attrs.text">手机号：</label>
              <input autocomplete="off" type="text" maxlength="11" class="form-control adultPrice" :id="'phone'+$attrs.text" placeholder="" v-model="personnel.mobile">
            </div>
            <h1 class="hide">英文姓名</h1>
            <div class="form-group san">
                <label :for="'engSur'+$attrs.text">英文姓：</label>
                <input autocomplete="off" type="text" class="form-control adultPrice" :id="'engSur'+$attrs.text" placeholder="" v-model="personnel.lastName">
            </div>
            <div class="form-group san">
                <label :for="'engName'+$attrs.text">英文名：</label>
                <input autocomplete="off" type="text" class="form-control adultPrice" :id="'engName'+$attrs.text" placeholder="" v-model="personnel.firstName">
            </div>
            <h1 class="hide">补充说明</h1>
            <div class="form-group">
                <label class="destxt" :for="'identity'+$attrs.text">补充说明：</label>
                <textarea class="form-control proDes" :id="'identity'+$attrs.text" rows="6" placeholder="补充说明，证件信息" v-model="personnel.remark"></textarea>
            </div>
            <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">确定</button>
        </form>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                Http:'',//详情接口
                routeHttp:'',
                RenyuanListHttp:'',
                xid:'',
                memberTitle:'',
                gender:['男','女'],
                setoffDate:'',//出生日期
                labelWord:'',//分组标签词语
                groupLabels:[],//标签组
                personnel:{
                    name:'',
                    gender:'男', //性别
                    birthday:'', //生日
                    lastName:'', //英文姓：
                    firstName:'', //英文名
                    mobile:'', //手机
                    remark:'', //补充说明
                },
            }
        },
        computed:{
            RenyuanView(){ //成员详情
                return this.$store.state.interface.xchRenyuanView;
            },
            Renyuan(){ //成员增加/修改
                return this.$store.state.interface.setXchRenyuan;
            },

        },
        methods:{
            colorChange(event){//下拉框在值该改变之后 改变颜色
                event.target.style.color = '#7f889c';
            },
            submitPro(){ //提交判断是否信息完整
                let self = this;
                let formData = new FormData(); // 基础信息表单数据
                let isMobile = /^(13|14|15|17|18)\d{9}$/;
                if (self.personnel.name === '') {
                  layer.msg('请填写姓名！');
                  return false
                }
                if (self.personnel.gender === '') {
                  layer.msg('请选择性别！');
                  return false
                }
                if (self.personnel.birthday === '') {
                  layer.msg('请选择出生日期！');
                  return false
                }
                if (self.personnel.mobile === '') {
                  layer.msg('请填写手机号！');
                  return false
                }
                if (!isMobile.test(self.personnel.mobile)) {
                  layer.msg('请填写11位有效手机号');
                  return false
                }
                formData.append('rid', self.$attrs.proid);
                formData.append('name', self.personnel.name);
                formData.append('gender',self.personnel.gender);
                formData.append('birthday', self.personnel.birthday);
                formData.append('lastName',self.personnel.lastName);
                formData.append('firstName', self.personnel.firstName);
                formData.append('mobile',self.personnel.mobile);
                formData.append('remark',self.personnel.remark);
                self.$ajax.post(self.routeHttp,formData).then(function(res) {
                  if(res.data.code === '10000' ){
                    layer.msg('修改成功！');
                  }else{
                    self.codes(res.data.code);
                    layer.msg('修改失败！');
                  }
                },function(res) {
                  layer.msg('服务器错误！');
                });
            }
        },
        beforeMount(){
            let self = this;
            let url = self.RenyuanView;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            self.Http = `${url}?sid=${sessionId}`; // 基础信息
            self.RenyuanListHttp = `${self.RenyuanList}?sid=${sessionId}`;
            self.routeHttp = `${self.Renyuan}?sid=${sessionId}`; // 提交

            // 成员详情
            self.$ajax.post(`${self.Http}&rid=${self.$attrs.proid}`).then(function(res){
                let code = res.data.code;
                if(code === '10000'){
                    let LxOrderTravel= res.data.result;
                    for(let i in LxOrderTravel){
                        self.personnel = LxOrderTravel[i];
                    }
                } else{
                    self.codes(code);
                    layer.msg('数据获取失败！');
                }
            },function(res){
                layer.msg('服务器错误！');
            })
        },
        mounted(){
            // 出生日期
            let self = this;
            $("#born"+self.$attrs.text).datepicker({
                    showAnim: 'fadeIn',
                    minDate: '-20y',
                    maxDate: '+1y',
                    defaultDate : -1200,
                    duration : 'fast',
                    firstDay : 1 ,
                    nextText : '下一月',
                    prevText : '上一月',
                    showButtonPanel: true,
                    currentText : '今天',
                    gotoCurrent : false,
                    onSelect: function (dateText, inst) {
                        self.personnel.birthday = dateText;
                        // self.personnel.birthday= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay)/1000;
                    },

            });


        }
    }
</script>
<style lang="scss" scoped>
    .basicInfor{
        form{
            display:block;
        }
        .title{
            color:#4e5e7e;
        }
        select option{
            color:#7f889c;
        }
    }
</style>
